<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch">

            <!--根据比对等级选择-->
            <el-form-item prop="adeMatchLevel">
                <el-select v-model="queryParams.adeMatchLevel" placeholder="Select Ade Match Level" clearable>
                    <el-option v-for="dict in dict.type.ade_match_level" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

            <!--根据算法检索-->
            <el-form-item prop="algorithm">
                <el-select v-model="queryParams.algorithm" placeholder="Select Algorithm" clearable>
                    <el-option v-for="dict in dict.type.ade_llm_algorithm" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

            <!--根据LLM 检索-->
            <el-form-item prop="llm">
                <el-select v-model="queryParams.llm" placeholder="Select LLM" clearable>
                    <el-option v-for="dict in dict.type.llm_model" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

            <!--根据Prompt Type 检索-->
            <el-form-item prop="promptType">
                <el-select v-model="queryParams.promptType" placeholder="Select PromptType" clearable>
                    <el-option v-for="dict in dict.type.prompt_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">Search</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">Reset</el-button>
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['ade:labresult:export']">Export</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="labresultList">
            <!--
            <el-table-column label="Lab ID" width="60" align="center" prop="labId" />
            -->
            <el-table-column label="F-Index" width="70" align="center" prop="foldIndex" />
            <el-table-column label="Algorithm" min-width="110" align="left" prop="algorithm" show-overflow-tooltip>
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.ade_llm_algorithm" :value="scope.row.algorithm" />
                </template>
            </el-table-column>

            <el-table-column label="Level" min-width="65" align="center" prop="adeMatchLevel">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.ade_match_level" :value="scope.row.adeMatchLevel" />
                </template>
            </el-table-column>

            <el-table-column label="LLM" min-width="100" align="left" prop="llm" show-overflow-tooltip>
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.llm_model" :value="scope.row.llm" />
                </template>
            </el-table-column>

            <el-table-column label="Prompt" min-width="80" align="left" prop="promptType" show-overflow-tooltip>
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.prompt_type" :value="scope.row.promptType" />
                </template>
            </el-table-column>

            <el-table-column label="Total" min-width="70" align="center" prop="total" />

            <el-table-column label="TP" min-width="55" align="center" prop="tp" />
            <el-table-column label="TN" min-width="55" align="center" prop="tn" />
            <el-table-column label="FP" min-width="55" align="center" prop="fp" />
            <el-table-column label="FN" min-width="55" align="center" prop="fn" />


            <el-table-column label="FPR" min-width="75" align="center" prop="fpr">
                <template slot-scope="scope">
                    <div v-html="formatToFourDecimals(scope.row.fpr)" />
                </template>
            </el-table-column>

            <el-table-column label="FNR" min-width="75" align="center" prop="fnr">
                <template slot-scope="scope">
                    <div v-html="formatToFourDecimals(scope.row.fnr)" />
                </template>
            </el-table-column>

            <el-table-column label="Precision" min-width="90" align="center" prop="precision">
                <template slot-scope="scope">
                    <div v-html="formatToFourDecimals(scope.row.precision)" />
                </template>
            </el-table-column>

            <el-table-column label="Recall" min-width="80" align="center" prop="recall">
                <template slot-scope="scope">
                    <div v-html="formatToFourDecimals(scope.row.recall)" />
                </template>
            </el-table-column>

            <el-table-column label="F1-score" min-width="80"  align="center" prop="f1">
                <template slot-scope="scope">
                    <div v-html="formatToFourDecimals(scope.row.f1)" />
                </template>
            </el-table-column>

            <el-table-column label="Accuracy" min-width="80" align="center" prop="accuracy">
                <template slot-scope="scope">
                    <div v-html="formatToFourDecimals(scope.row.accuracy)" />
                </template>
            </el-table-column>

            <el-table-column label="Specificity" min-width="90" align="center" prop="specificity">
                <template slot-scope="scope">
                    <div v-html="formatToFourDecimals(scope.row.specificity)" />
                </template>
            </el-table-column>
            <el-table-column label="Create Time" align="center" prop="createTime" width="140">
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script>
import { listLabresult, getLabresult, delLabresult, addLabresult, updateLabresult } from "@/api/ade/labresult";

export default {
    name: "Labresult",
    dicts: ['ade_match_level', 'llm_model', 'prompt_type', 'ade_llm_algorithm'],
    props: {
        id: {                 //传入的ID     LAB Analysis ID （一次分析任务的ID）
            type: Number,
            required: true
        }
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // AdeLabResult表格数据
            labresultList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // Specificity时间范围
            daterangeCreateTime: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 12,
                labId: null,
                precision: null,
                recall: null,
                f1: null,
            },
            // 表单参数
            form: {},
        };
    },
    created() {
        this.queryParams.labId = this.id; // 设置labId为传入的ID
        this.getList();
    },
    methods: {
        /** 查询AdeLabResult列表 */
        getList() {
            this.loading = true;
            this.queryParams.labId = this.id; // 设置labId为传入的ID
            listLabresult(this.queryParams).then(response => {
                this.labresultList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.daterangeCreateTime = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('ade/labresult/export', {
                ...this.queryParams
            }, `labresult_${new Date().getTime()}.xlsx`)
        },
        formatToFourDecimals(value) {
            if (!isNaN(value)) {
                const formattedValue = Number(value).toFixed(4);
                if (value >= 0.9) {
                    return `<span style="color: green;font-weight:800">${formattedValue}</span>`;
                } else if (value >= 0.8) {
                    return `<span style="color: orange;font-weight:800">${formattedValue}</span>`;
                }
                return formattedValue;
            }
            return value; // 如果不是数字，直接返回原值
        }
    }
};
</script>
